import { ref } from "vue"

export default function() {
    const vue3Flag = ref(true);

    const reactiveFn = (obj: any) => {
        //模拟Vue3中实现响应式
        const vue3 = new Proxy(obj, {
            //有人读取p的某个属性时调用
            get(target, propName) {
                console.log(`有人读取了person身上的属性`)
                console.log(propName)
                const res = Reflect.get(target, propName)
                console.log(111,res)
                return (typeof res === 'object' && res !== null) ? reactiveFn(res) : res;
            },
            //有人修改p的某个属性、或给p追加某个属性时调用
            set(target, propName, value) {
                console.log(`有人修改了person身上的${propName as any}属性，我要去更新界面了！`)
                vue3Flag.value = false;
                Reflect.set(target, propName, value)
                setTimeout(() => {
                    vue3Flag.value = true;
                }, 0);
                return true;
            },
            //有人删除p的某个属性时调用
            deleteProperty(target, propName) {
                vue3Flag.value = false;
                console.log(`有人删除了person身上的${propName as any}属性，我要去更新界面了！`)
                const res = Reflect.deleteProperty(target, propName);
                setTimeout(() => {
                    vue3Flag.value = true;
                }, 0);
                return res;
            }
        })
        return vue3;
    }
    return {
        vue3Flag,
        reactiveFn
    }
}